<template>
  <div class="article-page">
    <div
      class="article-item"
      v-for="item in articles"
      :key="item.id"
      @click="$router.push(`/detail/${item.id}`)"
    >
      <div class="head">
        <img :src="item.creatorAvatar" alt="" />
        <div class="con">
          <p class="title">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
        </div>
      </div>
      <div class="body">
        {{ item.content }}
      </div>
      <div class="foot">点赞 {{ item.likeCount }} | 浏览 {{ item.views }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ArticlePage',
    data() {
      return {
        articles: [],
      }
    },
    // 请求数据
    async created() {
      const {
        data: {
          result: { rows },
        },
      } = await this.$axios({
        url: '/articles',
      })
      // 将请求过来的数据赋值给data
      this.articles = rows
    },
    activated() {
      // 被激活了
      console.log('我在缓存中被激活了')
    },
    deactivated() {
      // 失去激活
      console.log('我被缓存隐藏啦')
    },
  }
</script>
<style lang="less" scoped>
  .article-page {
    background: #f5f5f5;
  }
  .article-item {
    margin-bottom: 10px;
    background: #fff;
    padding: 10px 15px;
    .head {
      display: flex;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
      }
      .con {
        flex: 1;
        overflow: hidden;
        padding-left: 15px;
        p {
          margin: 0;
          line-height: 1.5;
          &.title {
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
            white-space: nowrap;
          }
          &.other {
            font-size: 10px;
            color: #999;
          }
        }
      }
    }
    .body {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
      margin-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .foot {
      font-size: 12px;
      color: #999;
      margin-top: 10px;
    }
  }
</style>